<template>
    <div>
<!--        <div>{{chartData == []}}</div>-->

        <div id="goods_price_trend_chart" :style="{height: height, width: width}"></div>
        <!---->
    </div>
</template>

<script>
    import echarts from "echarts";

    export default {
        name: "goods_price_trend_chart",
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: (940/3840*100) +'vw'
            },
            height: {
                type: String,
                // default: 'calc(100vh - 164px)'
                default: (640/2160*100) + 'vh'
            },
            chartData: {
            }
        },
        data() {
            return {
            }
        },
        mounted() {
            this.initMap();
        },
        methods: {

            initMap() {
                let _this = this;
                _this.chartData.goodsFuturePrices.sort(function(s, t) {
                    let a = s.priceDate;
                    let b = t.priceDate;
                    if (a < b) return -1;
                    if (a > b) return 1;
                    return 0;
                });
                _this.chartData.msecGoodsPrices.sort(function(s, t) {
                    let a = s.priceDate;
                    let b = t.priceDate;
                    if (a < b) return -1;
                    if (a > b) return 1;
                    return 0;
                });

                let goodsFuturePrices = [];
                // _this.chartData.goodsFuturePrices[5].price = null;
                for (let i = 0; i < _this.chartData.goodsFuturePrices.length; i++) {
                    let list = [];
                    list.push(_this.chartData.goodsFuturePrices[i].price)
                    if (list[0]) {
                        goodsFuturePrices.push(list[0]);
                    } else {
                        goodsFuturePrices.push(null);
                    }

                }

                let msecGoodsPrices = [];
                for (let i = 0; i < _this.chartData.msecGoodsPrices.length; i++) {
                    let list = [];
                    list.push(_this.chartData.msecGoodsPrices[i].price)
                    if (list[0]) {
                        msecGoodsPrices.push(list[0]);
                    } else {
                        msecGoodsPrices.push(null);
                    }
                }

                let minGoodsPrice = null;
                let maxGoodsPrice = null;

                minGoodsPrice = Math.min.apply(null, msecGoodsPrices);
                maxGoodsPrice = Math.max.apply(null, msecGoodsPrices);
                if (minGoodsPrice > maxGoodsPrice) {
                    minGoodsPrice = Math.min.apply(null, msecGoodsPrices);
                    maxGoodsPrice = Math.max.apply(null, msecGoodsPrices);
                }

                let purchasePrice = _this.chartData.purchasePrice
                if(_this.chartData.purchasePrice != null){
                    if(purchasePrice > maxGoodsPrice){
                        maxGoodsPrice = purchasePrice;
                    }
                    if(purchasePrice < minGoodsPrice){
                        minGoodsPrice = purchasePrice;
                    }
                }


                let priceDate = [];

                let goodsFuturePricesDate = [];
                for (let i = 0; i < _this.chartData.goodsFuturePrices.length; i++) {
                    let date = [];
                    date.push(_this.chartData.goodsFuturePrices[i].priceDate)
                    goodsFuturePricesDate.push(date[0]);
                }

                let msecGoodsPricesDate = [];
                for (let i = 0; i < _this.chartData.msecGoodsPrices.length; i++) {
                    let date = [];
                    date.push(_this.chartData.msecGoodsPrices[i].priceDate)
                    msecGoodsPricesDate.push(date[0]);
                }

                if (goodsFuturePricesDate.length >= msecGoodsPricesDate.length) {
                    priceDate = msecGoodsPricesDate;
                } else {
                    priceDate = msecGoodsPricesDate;
                }
                let option = {
                    // backgroundColor: 'rgb(2,44,79)',
                    /* title: {
                         text: '哎呦,不错哦',
                         textStyle: {
                             align: 'center',
                             color: '#fff',
                             fontSize: 20,
                         },
                         top: '5%',
                         left: 'center',
                     },*/
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                color: '#81BAE5',
                                backgroundColor: 'transparent'
                            }
                        }
                    },
                    legend: {
                        textStyle: {
                            color: ['#f9f9f9']
                        },
                        data: ['收购价','现货价格'],
                        left: 'center',
                        bottom: '-5'
                    },
                    grid: {
                        top: '2%',
                        left: '17%',
                        right: '12%',
                        bottom: '17%',
                        // containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#3B6F9F'
                            }
                        },
                        axisLabel: {
                            color: '#f9f9f9',
                            fontSize: (14/3840*100) + 'vw',
                            //X轴标签 label 做了特殊处理，防止左右溢出
                            formatter: (value, index) => {
                                /*if (index === 0 || index === priceDate.length - 1) {
                                    return '';
                                }*/
                                return value.slice(5);
                            }
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false
                        },
                        boundaryGap: false,
                        data: priceDate
                            // ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '49', '50'],
                    }],

                    yAxis: [{
                        type: 'value',
                        min: parseInt(minGoodsPrice * 0.99),
                        max: parseInt(maxGoodsPrice * 1.055),
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            color: '#3B6F9F',
                            lineStyle: {
                                color: '#3B6F9F'
                            }
                        },
                        axisLine: {
                            show: true,
                            color: '#3B6F9F',
                            lineStyle: {
                                color: '#3B6F9F'
                            }
                        },
                        axisLabel: {
                            show: true,
                            margin: 20,
                            color: '#90D4FF',
                            fontSize: (14/3840*100) + 'vw',
                            textStyle: {
                                color: '#90D4FF'
                            },
                        },
                        axisTick: {
                            show: false,
                        }
                    }],
                    series: [{
                        name: '现货价格',
                        type: 'line',
                        smooth: true, //是否平滑
                        showSymbol: true,
                        // symbol: 'image://./static/images/guang-circle.png',
                        symbolSize: (12/2160*100) + 'vh',
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#77FADA',
                                fontSize: (20/3840*100) + 'vw'
                            }
                        },
                        itemStyle: {
                            color: "#00FEBF",
                            borderColor: "#00FEBF",
                            borderWidth: 3,
                            // shadowColor: 'rgba(0, 0, 0, .3)',
                            // shadowBlur: 0,
                            // shadowOffsetY: 2,
                            // shadowOffsetX: 2,
                        },
                        /*tooltip: {
                            show: true
                        },*/
                        areaStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(0, 254, 191, 0.52)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 254, 191, 0.05)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                        data: msecGoodsPrices
                            // [1564, 1560, 1596, 1543, 1573, 1578, 1534, 1546, null, null, null, null]
                    },
                        // {
                        //     name: '期货价格',
                        //     type: 'line',
                        //     smooth: true, //是否平滑
                        //     showSymbol: true,
                        //     // symbol: 'image://./static/images/guang-circle.png',
                        //     symbolSize: (12/2160*100) + 'vh',
                        //     lineStyle: {
                        //         normal: {
                        //             color: "#c8e466"
                        //         }
                        //     },
                        //     label: {
                        //         show: true,
                        //         position: 'top',
                        //         textStyle: {
                        //             color: '#c8e466',
                        //             fontSize: (20/3840*100) + 'vw'
                        //         }
                        //     },
                        //     itemStyle: {
                        //         normal: {
                        //             color: "#FFD700 ",
                        //             borderColor: "#c8e466",
                        //             borderWidth: 3,
                        //             // shadowColor: 'rgba(0, 0, 0, .3)',
                        //             // shadowBlur: 0,
                        //             // shadowOffsetY: 2,
                        //             // shadowOffsetX: 2,
                        //         }
                        //     },
                        //     areaStyle: {
                        //         normal: {
                        //             color: {
                        //                 type: 'linear',
                        //                 x: 0,
                        //                 y: 0,
                        //                 x2: 0,
                        //                 y2: 1,
                        //                 colorStops: [{
                        //                     offset: 0,
                        //                     color: 'rgba(71, 187, 254, 0.52)' // 0% 处的颜色
                        //                 }, {
                        //                     offset: 1,
                        //                     color: 'rgba(71, 187, 254, 0.05)' // 100% 处的颜色
                        //                 }],
                        //                 global: false // 缺省为 false
                        //             }
                        //         }
                        //     },
                        //     data: goodsFuturePrices
                        //         // [1643, 1688, 1653, 1639, 1676, 1692, 1661, 1664, null, null, null, null]
                        // },

                        {
                            name: '收购价',
                            type: 'line',
                            smooth: true, //是否平滑
                            showSymbol: false,
                            // symbol: 'image://./static/images/guang-circle.png',
                            symbolSize: (12/2160*100) + 'vh',
                            /*lineStyle: {
                                normal: {
                                    color: "#C280FF"
                                }
                            },
                            label: {
                                show: false,
                                position: 'top',
                                textStyle: {
                                    color: '#C280FF',
                                    fontSize: 20
                                }
                            },*/
                            itemStyle: {
                                normal: {
                                    color: "#C280FF",
                                    borderColor: "#C280FF",
                                    borderWidth: 3,
                                    // shadowColor: 'rgba(0, 0, 0, .3)',
                                    // shadowBlur: 0,
                                    // shadowOffsetY: 2,
                                    // shadowOffsetX: 2,
                                }
                            },
                            /*areaStyle: {
                                normal: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0,
                                            color: 'rgba(71, 187, 254, 0.52)' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: 'rgba(71, 187, 254, 0.05)' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    }
                                }
                            },*/
                            // data: purchasePrice,
                            markLine:{
                                symbol: ['none', 'none'], //去掉箭头
                                itemStyle: {
                                    normal: {
                                        lineStyle: {
                                            type: 'dashed',
                                            color: '#C280FF',
                                            width: 2
                                        }
                                    },
                                },
                                data: [{
                                    name: '收购价',
                                    yAxis: _this.chartData.purchasePrice ? _this.chartData.purchasePrice : '',
                                }, ],
                            },
                             /*
                              * 标记的文字
                              */
                            markPoint: {
                                silent: true,
                                label: { fontSize: (33.12/3840*100) + 'vw' },
                                data: [
                                    {
                                        yAxis: _this.chartData.purchasePrice,
                                        x: '95%',
                                        symbolSize: (0.1/2160*100) + 'vh',
                                        /*label: {
                                              textStyle: { color: '#C280FF' },
                                              padding: [3.312, 14.28],
                                              fontSize: 406.432/3840*100,
                                              borderRadius: 13.2481,
                                              backgroundColor: 'rgba(25, 189, 122, 0.2)',
                                              position: 'left',
                                            formatter: '收购价'
                                        }*/
                                    }
                                ]
                            }
                            // [1643, 1688, 1653, 1639, 1676, 1692, 1661, 1664, null, null, null, null]
                        }
                    ]
                };

                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('goods_price_trend_chart'));
                myChart.setOption(option);

            }
        }
    }
</script>

<style scoped lang="scss">
    #transaction_number_grow_echarts {
        position: relative;
        top: (-10/2180*100) + 'vh';
    }
</style>